<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>报价单 - {{ quotation.quotation_number }}</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/all.min.css') }}">
  <style>
    /* 基础样式重置 */
    :root {
      --primary-color: #2563eb;
      /* 主色调-蓝 */
      --secondary-color: #4b5563;
      /* 次要文本色 */
      --light-bg: #f9fafb;
      /* 浅色背景 */
      --border-color: #e5e7eb;
      /* 边框色 */
      --success-color: #10b981;
      /* 成功色 */
      --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.5;
      color: #1f2937;
      background-color: var(--light-bg);
      padding: 16px;
      font-size: 14px;
    }

    a {
      text-decoration: none;
    }

    /* 容器样式 */
    .container {
      max-width: 1000px;
      margin: 0 auto;
      background: white;
      border-radius: 8px;
      box-shadow: var(--card-shadow);
      overflow: hidden;
    }

    /* 头部样式 */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      border-bottom: 1px solid var(--border-color);
      background-color: white;
    }

    .header-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--primary-color);
    }

    .header-info {
      color: var(--secondary-color);
    }

    .valid-badge {
      background-color: var(--primary-color);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 14px;
    }

    /* 卡片布局 */
    .card-container {
      display: flex;
      flex-wrap: wrap;
      padding: 16px;
      gap: 16px;
    }

    .card {
      flex: 1 1 300px;
      background: white;
      border-radius: 6px;
      box-shadow: var(--card-shadow);
      padding: 16px;
      min-width: 0;
      /* 防止flex内容溢出 */
    }

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary-color);
      padding-bottom: 8px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--border-color);
    }

    .text-primary {
      color: #FF9900;
    }

    .text-success {
      color: #111111;
    }

    .font-34 {
      font-size: 34px;
    }

    .font-30 {
      font-size: 30px;
    }
    .font-28 {
      font-size: 28px;
    }
    /* 信息行样式 */
    .info-row {
      display: flex;
      margin-bottom: 8px;
    }

    .info-label {
      width: 80px;
      font-weight: 500;
      color: var(--secondary-color);
      flex-shrink: 0;
    }

    .info-value {
      font-weight: 600;
      /* 中等加粗 */
      color: #1a365d;
      /* 深蓝色增加专业感 */
      letter-spacing: 0.3px;
      /* 轻微字距调整 */
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      /* 微阴影增强层次 */
      transition: all 0.2s ease;
      /* 悬停动画 */
    }

    /* 悬停效果 */
    .info-value:hover {
      color: #2c5282;
      /* 悬停时颜色加深 */
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .info-value {
        font-weight: 500;
        /* 移动端稍减粗度 */
      }
    }

    /* 表格样式 */
    .table-container {
      padding: 0 16px 16px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    th,
    td {
      padding: 8px 12px;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }

    th {
      background-color: #f3f4f6;
      font-weight: 600;
      color: var(--secondary-color);
    }

    tr:nth-child(even) {
      background-color: var(--light-bg);
    }

    /* 产品图片 */
    .product-img {
      width: 400px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid #e5e7eb;
    }

    /* 中大型屏幕适配 */
    @media (min-width: 768px) {
      .product-img {
        width: 220px;
        height: 220px;
      }
    }

    /* 大型桌面适配 */
    @media (min-width: 1024px) {
      .product-img {
        width: 400px;
        height: 400px;
      }
    }

    /* 底部信息 */
    .footer-notes {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      padding: 16px;
      border-top: 1px solid var(--border-color);
    }

    .note-box {
      flex: 1;
      min-width: 200px;
    }

    .note-title {
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--primary-color);
    }

    /* 页脚 */
    .page-footer {
      text-align: center;
      padding: 16px;
      color: var(--secondary-color);
      font-size: 13px;
      border-top: 1px solid var(--border-color);
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .social-icon {
      color: var(--secondary-color);
      font-size: 20px;
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .social-icon:hover {
      color: var(--primary-color);
      transform: scale(1.1);
      background: rgba(0, 0, 0, 0.05);
    }



    /* 响应式调整 */
    @media (max-width: 768px) {
      .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .card {
        flex: 1 1 100%;
      }

      th,
      td {
        padding: 6px 8px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 头部信息 -->
    <div class="header">
      <div>
        <div class="header-title">QUOTATION</div>
        <div class="header-info">
          <p>Quotation Number: <strong>{{ quotation.quotation_number }}</strong></p>
          <p>Create Date: <strong>{{ quotation.created_at.strftime('%Y-%m-%d') }}</strong></p>
        </div>
      </div>
      <div class="valid-badge">VALID FOR 30 DAYS (badge)</div>
    </div>

    <!-- 销售员和公司信息 -->
    <div class="card-container">
      <!-- 销售员信息 -->
      <div class="card">
        <h3 class="card-title">Contact Information</h3>
        <div class="info-row">
          <span class="info-label">Name:</span>
          <span class="info-value">{{ quotation.user.username }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">Email:</span>
          <span>{{ quotation.user.email }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">Wechat:</span>
          <span>{{ quotation.user.phone }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">Social Media:</span>
          <div style="display: flex; gap: 8px;">
            {% if quotation.user.whatsapp %}
            <a href="{{ quotation.user.whatsapp }}" title="WhatsApp"><i class="fab fa-whatsapp social-icon"></i></a>
            {% endif %}
            {% if quotation.user.facebook %}
            <a href="{{ quotation.user.facebook }}" title="Facebook"><i class="fab fa-facebook-f social-icon"></i></a>
            {% endif %}
            {% if quotation.user.tiktok %}
            <a href="{{ quotation.user.tiktok }}" title="Tiktok"><i class="fab fa-tiktok social-icon"></i></a>
            {% endif %}
            {% if quotation.user.twitter %}
            <a href="{{ quotation.user.twitter }}" title="Twitter"><i class="fab fa-twitter social-icon"></i></a>
            {% endif %}
            {% if quotation.user.youtube %}
            <a href="{{ quotation.user.youtube }}" title="Youtube"><i class="fab fa-youtube social-icon"></i></a>
            {% endif %}
            {% if quotation.user.pinterest %}
            <a href="{{ quotation.user.pinterest }}" title="Pinterest"><i class="fab fa-pinterest social-icon"></i></a>
            {% endif %}
          </div>
        </div>
      </div>

      <!-- 公司信息 -->
      <div class="card">
        <h3 class="card-title">Company Information</h3>
        <div class="info-row">
          <span class="info-label">Company:</span>
          <span class="info-value">{{ quotation.company.name_en }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">Address:</span>
          <span>{{ quotation.company.address_en }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">Website:</span>
          <a href="{{ quotation.company.website }}" style="color: var(--primary-color);">
            <i class="fas fa-external-link-alt"></i> Visit Website
          </a>
        </div>
        <div class="info-row">
          <span class="info-label">Contact:</span>
          <div style="display: flex; gap: 8px;">
            <a href="mailto:{{ quotation.user.email }}" title="Send Email"><i
                class="fas fa-envelope social-icon"></i></a>
            <a href="tel:{{ quotation.user.phone }}" title="Call"><i class="fas fa-phone-alt social-icon"></i></a>
          </div>
        </div>
      </div>
    </div>

    <!-- 报价项目表格 -->
    <div class="table-container">
      <h3 class="card-title">Quotation Items</h3>
      <table>
        <thead>
          <tr>
            <th class="font-34">Image</th>
            <th class="font-34">Model</th>
            <th class="font-34">Description</th>
            <th class="font-34">Price</th>
          </tr>
        </thead>
        <tbody>
          {% for item in items %}
          <tr>
            <td>
              <img src="{{ item.display_image_url }}" alt="{{ item.product_detail.description_en }}"
                class="product-img">
            </td>
            <td>
              {% if item.product_detail %}
              <span class="font-30">{{ item.product_detail.self_model or item.product_detail.other_model }}</span>
              {% else %}
              <span style="color: var(--secondary-color);">-</span>
              {% endif %}
            </td>
            <td>
              {% if item.product_detail %}
              <span class="font-28"> {{ item.product_detail.description_en or '' }}</span>
              {% else %}
              <span class="font-28" style="color: var(--secondary-color);">-</span>
              {% endif %}
            </td>
            <td style="font-weight: 600;">
              <span class="text-primary font-28">{{ item.quote_currency.symbol }}</span>
              <span class="text-success font-28">{{ '%.2f'|format(item.unit_price) }}</span>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- 付款条款和备注 -->
    <div class="footer-notes">
      <div class="note-box">
        <h4 class="note-title">Payment Terms</h4>
        <ul style="list-style-position: inside; padding-left: 4px;">
          <li style="margin-bottom: 4px;">50% deposit required to confirm order</li>
          <li style="margin-bottom: 4px;">Balance due before shipment</li>
          <li>Bank transfer or PayPal accepted</li>
        </ul>
      </div>
      <div class="note-box">
        <h4 class="note-title">Notes</h4>
        <p>Prices valid for 30 days from quotation date. Lead time approximately 15-20 working days after order
          confirmation.</p>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="page-footer">
      <div class="social-icons">
        <a href="{{ quotation.user.facebook }}" class="social-icon"><i class="fab fa-facebook-f"></i></a>
        <a href="{{ quotation.user.twitter }}" class="social-icon"><i class="fab fa-twitter"></i></a>
        <a href="{{ quotation.user.whatsapp }}" class="social-icon"><i class="fab fa-whatsapp"></i></a>
      </div>
      <p>Thank you for your inquiry. We look forward to working with you!</p>
      <p>© {{ quotation.created_at.year }} <a href="{{ quotation.company.website }}"
          style="text-decoration: none;color: var(--primary-color); color:red;">{{ quotation.company.name_en }}</a>. All
        rights
        reserved.</p>
    </div>
  </div>
</body>

</html>